<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>登录</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <style>
      .root {
        margin-top: 150px;
      }
      #errorHint {
        visibility: hidden;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        font-size: 12px;
        width: 302px;
        height: 23px;
        line-height: 23px;
        padding-left: 40px;
        box-sizing: border-box;
        color: #e5383c;
        background-color: rgb(255, 235, 235);
        border: rgb(250, 204, 198) solid 1px;
        background-image: url("./static/jingdong-icons.png");
        overflow: clip;
        background-repeat: no-repeat;
        background-position: -94px -46px;
      }
      input {
        border: none;
        outline: none;
      }
      /*input:focus{*/
      /*    border: #BBBBBB solid 1px;*/
      /*}*/
      .nameC,
      .psdC {
        display: flex;
        border: #bbbbbb solid 1px;
        width: 300px;
        margin: auto;
        flex-direction: row-reverse;
      }
      .userIcon {
        background-image: url("./static/jingdong-icons.png");
        overflow: clip;
        width: 38px;
        height: 38px;
        background-position: left top;
        border-right: #bbbbbb solid 1px;
        background-repeat: no-repeat;
      }
      .nameIn,
      .psdIn {
        width: 261px;
        border: none;
      }
      .nameIn:focus + .userIcon {
        background-image: url("./static/jingdong-icons.png");
        overflow: clip;
        background-position: 0px -48px;
        color: bisque;
      }

      .psdIn:focus + .psdIcon {
        background-image: url("./static/jingdong-icons.png");
        overflow: clip;
        background-position: -48px -48px;
        color: bisque;
      }

      .psdC {
        margin-top: 20px;
      }
      .psdIcon {
        background-image: url("./static/jingdong-icons.png");
        overflow: clip;
        width: 38px;
        height: 38px;
        border-right: #bbbbbb solid 1px;
        background-position-x: -48px;
        background-repeat: no-repeat;
      }
      .submit {
        width: 300px;
        height: 34px;
        background-color: #e5383c;
        border: #c96361 solid 1px;
        color: white;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
      }
      .submit a {
        display: block;
        text-decoration: none;
        color: inherit;
        text-align: center;
        line-height: 34px;
      }
      .psdCError {
        border: #e5383c solid 1px;
      }
      .psdIconError {
        background-image: url("./static/jingdong-icons.png");
        overflow: clip;
        width: 38px;
        height: 38px;
        border-right: #e5383c solid 1px;
        background-position: -48px -96px;
        background-repeat: no-repeat;
      }
      .nameIconError {
        background-image: url("./static/jingdong-icons.png");
        overflow: clip;
        width: 38px;
        height: 38px;
        border-right: #e5383c solid 1px;
        background-position: 0px -96px;
        background-repeat: no-repeat;
      }
    </style>
    <script src="/js/vue-2.7.9-dev.js"></script>
  </head>
  <body>
    <div class="root">
      <div id="errorHint"></div>

      <div id="nameC" class="nameC">
        <input
          v-model="name"
          id="nameIn"
          class="nameIn"
          type="text"
          autofocus
          placeholder="请输入用户名"
        />
        <div id="userIcon" class="userIcon"></div>
      </div>

      <div id="psdCID" class="psdC">
        <input
          v-model="psd"
          id="psdIn"
          class="psdIn"
          type="password"
          placeholder="请输入密码"
        />
        <div id="psdIconID" class="psdIcon"></div>
      </div>

      <div id="submit" class="submit" @click="submit"><a href="#">登录</a></div>
    </div>

    <script>
        const baseUrl = "http://localhost:8081/StuManager/";
        let vm = new Vue({
          data() {
            return {
              name: "",
              psd: "",
            };
          },
          methods: {
            submit() {
              // 做提交
              // 1. 获取数据 name psd
              // 需要获取到页面中的用户输入的内容
              let name = this.name;
              let psd = this.psd;
              // 过滤用户名或密码是空的情况
              if (!name) {
                $("#errorHint")
                  .show()
                  .html("请输入用户名!")
                  .css("visibility", "visible");
                return;
              }
              if (!psd) {
                $("#errorHint")
                  .show()
                  .html("请输入密码!")
                  .css("visibility", "visible");
                return;
              }
              // 2. 发送ajax请求
              // 使用ajax 请求服务器
              let xhr = new XMLHttpRequest();
              xhr.open("post", baseUrl + "LoginServlet");
              xhr.setRequestHeader(
                "content-type",
                "application/x-www-form-urlencoded;charset=utf-8"
              );
              xhr.onreadystatechange = function () {
                if (this.readyState === 4) {
                  if (this.status >= 200 && this.status < 300) {
                    let jsonData = this.responseText;
                    console.log("服务器的响应: ", jsonData);
                    let data = JSON.parse(jsonData);
                    if (data.code === 20) {
                      // 登录成功 跳转到首页
                        alert("登录成功")
                        $("#errorHint")
                            .show()
                            .html(data.msg)
                            .css("visibility", "disable");
                    } else if (data.code === 30) {
                      $("#errorHint")
                        .show()
                        .html(data.msg)
                        .css("visibility", "visible");
                    }
                  }
                }
              };
              xhr.send("name=" + name + "&psd=" + psd + "&action=login");
            },
          },
        });
        vm.$mount(".root");
      </script>
  </body>
</html>
